import React from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import BaseComponent from '../../components/common/baseComponent.js';
import logoIcon from '../../../assets/images/refuel/icon.png';
import lineIcon from '../../../assets/images/refuel/line.png';
import Loading from '../../components/common/loading';

@connect((state) => {
  const { refuel } = state;
  return {
    detail: refuel.get('refuelDetail'),
  };
})
class Refuel extends BaseComponent {
  componentDidMount() {
    const { detail } = this.props.location.state || {};
    if (!detail) {
      this.props.history.goBack();
    }
  }

  render() {
    const { detail } = this.props.location.state || {};
    if (!detail) {
      return <Loading />;
    }

    let gunView;
    if (detail.get('gunNo')) {
      gunView = (
        <div className="text-row">
          <div className="text">油枪号</div>
          <div className="value">{detail.get('gunNo')}</div>
        </div>
      );
    }

    let phoneView;
    if (detail.get('phone')) {
      phoneView = (
        <div className="text-row">
          <div className="text">手机号码</div>
          <div className="value">{detail.get('phone')}</div>
        </div>
      );
    }

    return (
      <div className="refuel-detail">
        <img src={logoIcon} alt="" className="icon" />
        <div className="content-view">
          <div className="title">加油详情</div>
          <div className="date">{moment(detail.get('payTime')).format('YYYY/MM/DD HH:mm:ss')}</div>
          <img alt="" className="dash-line" />
          <div className="text-view">
            <div className="text-row">
              <div className="text">订单编号</div>
              <div className="value">{detail.get('orderNo')}</div>
            </div>
            <div className="text-row">
              <div className="text">油站名称</div>
              <div className="value">{detail.get('stationName')}</div>
            </div>
            <div className="text-row">
              <div className="text">油品标号</div>
              <div className="value">{detail.get('oilNo')}</div>
            </div>
            {gunView}
            {phoneView}
            {/* {productView} */}
            <div className="body">
              <img alt="" className="dash-line" />
            </div>
            <div className="text-row">
              <div className="text">订单总额</div>
              <div className="money">&#65509;{detail.get('orderAmountYuan')}</div>
            </div>
            <div className="text-row">
              <div className="text">优惠金额</div>
              <div className="money">-&#65509;{detail.get('disAmountYuan')}</div>
            </div>
            <div className="text-row">
              <div className="text">支付金额</div>
              <div className="money">&#65509;{detail.get('payAmountYuan')}</div>
            </div>
          </div>
        </div>
        <img src={lineIcon} alt="" className="line" />
      </div>
    );
  }
}

export default Refuel;
